<script>
//前端开发：先死后活法，前端页面数据是死的，只有调用了
//导入axios
import axios from 'axios'
//导入ref
import {ref} from 'vue'
//导入user.js
import {deptGetAllService} from './api/user.js'
//定义响应数据
const emps = ref([])
//获取所有用户信息
//let data=userGetAllService()
//users.value=data
//因为函数是异步的，所以要使用await，同时函数要使用async
const getAllEmp=async function(){
  let data=await empGetAllService()
  emp.value=data
}
//调用函数
getAllEmp()
</script>

<template>
  <h2>部门信息列表</h2>
  <table>
    <tr>
      <th>员工ID</th>
      <th>用户名</th>
      <th>密码</th>
      <th>姓名</th>
      <th>性别</th>
      <th>头像</th>
      <th>职位</th>
      <th>入职日期</th>
      <th>部门ID</th>
      <th>创建时间</th>
      <th>更新时间</th>
      <th>操作</th>
    </tr>
    <tr  v-for="emp in emps">
      <td>{{emp.id}}</td>
      <td>{{emp.username}}</td>
      <td>{{emp.password}}</td>
      <td>{{emp.name}}</td>
      <td>{{emp.gender}}</td>
      <td>
        <img :src="emp.image" alt="员工头像" class="w-10 h-10 rounded-full object-cover">
      </td>
      <td>{{emp.job}}</td>
      <td>{{emp.entryDate}}</td>
      <td>{{emp.deptId}}</td>
      <td>{{emp.createTime}}</td>
      <td>{{emp.updateTime}}</td>





      <td>
        <button class="btn btn-primary mr-2">编辑</button>
        <button class="btn btn-danger">删除</button>
      </td>

    </tr>
  </table>

</template>

<style scoped>

</style>